<template>
  <div class="register-container">
    <div class="register-box">
      <div class="register-header">
        <img src="../assets/logo.png" alt="Logo" class="logo" />
        <h1>用户注册</h1>
      </div>

      <el-form :model="user" class="register-form">
        <el-form-item>
          <el-input
            v-model="user.username"
            placeholder="用户名"
            :prefix-icon="User"
            maxlength="30"
            size="large"
            class="register-input"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="user.password"
            placeholder="请输入密码"
            show-password
            :prefix-icon="Lock"
            maxlength="30"
            size="large"
            class="register-input"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="user.confirmPassword"
            placeholder="请确认密码"
            show-password
            :prefix-icon="Lock"
            maxlength="30"
            size="large"
            class="register-input"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="user.email"
            placeholder="邮箱"
            :prefix-icon="Message"
            maxlength="30"
            size="large"
            class="register-input"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="user.phone"
            placeholder="手机号"
            :prefix-icon="Phone"
            maxlength="11"
            size="large"
            class="register-input"
          />
        </el-form-item>

        <el-form-item class="avatar-upload-item">
          <div class="avatar-label">上传头像</div>
          <el-upload
            class="avatar-uploader"
            action="/api/user/upload/file"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
          >
            <div class="avatar-preview">
              <img v-if="user.avatar" :src="user.avatar" class="avatar-image" />
              <div v-else class="avatar-placeholder">
                <el-icon class="upload-icon"><Avatar /></el-icon>
              </div>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item class="captcha-item">
          <el-input
            v-model="user.captcha"
            placeholder="验证码"
            :prefix-icon="Key"
            maxlength="5"
            size="large"
            class="captcha-input"
          />
          <img
            :src="captcha"
            class="captcha-image"
            @click="loadCaptcha"
            alt="验证码"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            class="register-button"
            type="primary"
            @click="onRegister"
            size="large"
          >
            注册账户
          </el-button>
        </el-form-item>

        <div class="login-link">
          <span>已有账户？</span>
          <el-button
            type="text"
            @click="goToLogin"
            class="login-button"
          >
            立即登录
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import {User, Lock, Key, Message, Avatar, Phone} from '@element-plus/icons-vue'
import loginApi from '../api/login_api.js'
import registerApi from "@/api/register_api.js"

const user = ref({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  phone: '',
  avatar:'',
  captcha: '',
  key: ''
})

const handleUploadSuccess = (response, file) => {
  if (response && response.data) {
    user.value.avatar = response.data;
    ElMessage.success('头像上传成功');
  } else {
    ElMessage.error('头像上传失败');
  }
}

const handleUploadError = (error) => {
  ElMessage.error('头像上传失败: ' + (error.message || '未知错误'));
}

const router = useRouter()
const captcha = ref("")

// 加载验证码
const loadCaptcha = async () => {
  try {
    const res = await loginApi.captcha();
    user.value.key = res.key;
    captcha.value = res.base;
  } catch (error) {
    ElMessage.error('验证码加载失败');
  }
}

// 注册方法
const onRegister = async () => {
  // 基本验证
  if (!user.value.username) {
    ElMessage.error('请输入用户名');
    return;
  }

  if (!user.value.password) {
    ElMessage.error('请输入密码');
    return;
  }

  if (user.value.password !== user.value.confirmPassword) {
    ElMessage.error('两次输入的密码不一致');
    return;
  }

  if (!user.value.email) {
    ElMessage.error('请输入邮箱');
    return;
  }

  if (!user.value.phone) {
    ElMessage.error('请输入手机号');
    return;
  }

  if (!user.value.captcha) {
    ElMessage.error('请输入验证码');
    return;
  }

  try {
    // 调用注册API
    const res = await registerApi.register({
      username: user.value.username,
      password: user.value.password,
      email: user.value.email,
      phone: user.value.phone,
      avatar: user.value.avatar,/*头像*/
      captcha: user.value.captcha,
      key: user.value.key
    });

    if (res) {
      ElMessage.success('注册成功');
      await router.push('/login'); // 注册成功后跳转到登录页面
    }
  } catch (error) {
    ElMessage.error(error.message || '注册失败');
    // 重新加载验证码
    await loadCaptcha();
  }
}

// 返回登录页面
const goToLogin = () => {
  router.push('/login');
}

onMounted(() => {
  loadCaptcha();
})
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background-image: url('../assets/background.png');
  background-size: cover; /* 让图片铺满容器 */
  background-position: center; /* 图片居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.register-box {
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border: 1px solid #e1edff;
}

.register-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}

.register-header h1 {
  color: #333;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.register-form {
  margin-top: 20px;
}

.register-input {
  width: 100%;
}

:deep(.register-input .el-input__wrapper) {
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: none;
}

:deep(.register-input .el-input__inner) {
  color: #606266;
  background: transparent;
}

:deep(.register-input .el-input__inner::placeholder) {
  color: #c0c4cc;
}

.avatar-upload-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-label {
  color: #666;
  margin-bottom: 15px;
  font-size: 14px;
}

.avatar-uploader {
  width: 100px;
  height: 100px;
  border: 1px dashed #dcdfe6;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all 0.3s ease;
}

.avatar-uploader:hover {
  border-color: #0e88eb;
}

.avatar-preview {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
}

.upload-icon {
  font-size: 24px;
  color: #c0c4cc;
}

.captcha-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.captcha-input {
  flex: 1;
}

.captcha-image {
  width: 100px;
  height: 40px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
}

.register-button {
  width: 100%;
  background: linear-gradient(90deg, #0e88eb 0%, #1a9fff 100%);
  border: none;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 10px;
  color: white;
}

.register-button:hover {
  background: linear-gradient(90deg, #1a9fff 0%, #0e88eb 100%);
  transform: translateY(-2px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(14, 136, 235, 0.3);
}

.login-link {
  text-align: center;
  margin-top: 20px;
  color: #666;
  font-size: 14px;
}

.login-button {
  color: #0e88eb;
  font-weight: 600;
  margin-left: 5px;
}

.login-button:hover {
  color: #1a9fff;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .register-box {
    padding: 20px;
  }

  .captcha-item {
    flex-direction: column;
    align-items: stretch;
  }

  .captcha-image {
    width: 100%;
    margin-top: 10px;
  }
}
</style>
